<template>
  <el-aside width="auto">
    <!-- :default-active="router.currentRoute.value.path"  解决页面刷新后 菜单高亮与面包屑不匹配-->
    <el-menu
      :default-active="router.currentRoute.value.path"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      style="height: 100%"
      :router="true"
      :unique-opened="true"
      :default-openeds="openeds"
    >
      <!-- routerData.slice(1, routerData.length) 删除登录路由 -->
      <el-sub-menu
        v-for="item in routerData.slice(2, routerData.length)"
        :key="item.name"
        :index="item.id"
      >
        <template #title>
          <el-icon>
            <component class="icons" :is="item.icon"></component>
          </el-icon>
          <span> {{ item.name }}</span>
        </template>
        <el-menu-item-group v-for="i in item.children" :key="i.path">
          <el-menu-item :index="i.path">{{ i.name }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup lang='ts'>
import {
  defineComponent,
  ref,
  watch,
  reactive,
  onMounted,
  onUnmounted,
  inject,
} from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
//route是当前路由
const route = useRoute();

// 获取全部路由
const routerData = reactive(router.options.routes);
// 默认展开一个子菜单
const openeds = reactive(["1"]);
// 标题
// // 使用 inject 函数接收提供的数据
// const title = inject("title");

// const activeItem = (val: string) => {
//   // router.currentRoute.value.path; // 获取路由当前页面路径

//   title.value = val;
// };

// 侧边栏的展开收起
// 使用 inject 函数接收提供的数据
const isCollapse = inject("isCollapse");

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath, 222);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath, 333);
};
</script>

<style scoped>
</style>